<template>
  <div class="custom-collapse-comp">
    <div class="collapse-head">
      <div class="collapse-title">{{ title }}</div>
      <i v-if="showFold" class="el-icon-arrow-down" :class="{'collapse-is-hide':!show}" @click="show=!show" />
    </div>
    <el-collapse-transition>
      <div v-show="show" class="collapse-content">
        <slot />
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    showFold: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      show: true
    };
  }
};
</script>

<style lang="scss">
.custom-collapse-comp{
  .collapse-title{
    color: #1f2022;
    font-size: 15px;
    line-height: 36px;
    font-weight: bold;
    float: left;
    font-family: 'Microsoft YaHei-Regular, Microsoft YaHei';
  }
  .collapse-head{
    height: 36px;
    background: #E4E7ED;
    padding: 0 10px;
  }
  .el-icon-arrow-down{
    float: right;
    line-height: 36px;
    font-size: 20px;
    cursor: pointer;
    user-select: none;
    color: rgba(0, 0, 0, 0.2);
    transition: transform 0.3s, -webkit-transform 0.3s;
  }
  .collapse-is-hide{
    transform: rotate(-90deg);
  }
  .collapse-content{
    padding: 12px 0!important;
  }
}
</style>
